body{
  margin:0;

}

#height-getter{
  position:fixed;
  height:100vh;
  visibility: hidden;
}

.height-manager{
  background:rgba(0, 0, 0, 0);
}
div.bg {
  position: fixed;
}
div.bg-1 {
  position: fixed;
  background: -moz-linear-gradient(top,  rgba(237,238,244,0) 0, rgba(237,238,244,0) 0%, rgba(232,228,232,1) 28%, rgba(232,227,231,1) 30%, rgba(245,191,157,1) 30.1%, rgba(223,159,123,1) 50%, rgba(187,127,95,1) 68%, rgba(163,106,77,1) 80%, rgba(147,93,67,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(237,238,244,0) 0,rgba(237,238,244,0) 0%,rgba(232,228,232,1) 28%,rgba(232,227,231,1) 30%,rgba(245,191,157,1) 30.1%,rgba(223,159,123,1) 50%,rgba(187,127,95,1) 68%,rgba(163,106,77,1) 80%,rgba(147,93,67,1) 100%);
  background: linear-gradient(to bottom,  rgba(237,238,244,0) 0,rgba(237,238,244,0) 0%,rgba(232,228,232,1) 28%,rgba(232,227,231,1) 30%,rgba(245,191,157,1) 30.1%,rgba(223,159,123,1) 50%,rgba(187,127,95,1) 68%,rgba(163,106,77,1) 80%,rgba(147,93,67,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00edeef4', endColorstr='#935d43',GradientType=0 );
  background-size: 100vw auto;
  background-image: url("./desert-cut.svg");
  background-position: left top;
  background-repeat:no-repeat;
  margin:0;
  height:100vh;
  width:100vw;
  z-index:0;
}
div.bg-2{
  position: fixed;
  background: -moz-linear-gradient(top,  rgba(147,93,71,0) 0%, rgba(147,93,71,1) 28%, rgba(41,137,216,1) 68%, rgba(125,185,232,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(147,93,71,0) 0%,rgba(147,93,71,1) 28%,rgba(41,137,216,1) 68%,rgba(125,185,232,1) 100%);
  background: linear-gradient(to bottom,  rgba(147,93,71,0) 0%,rgba(147,93,71,1) 28%,rgba(41,137,216,1) 68%,rgba(125,185,232,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00935d47', endColorstr='#7db9e8',GradientType=0 );
  background-size: 100vw auto;
  margin:0;
  top:100vh;
  height:200vh;
  width:100vw;
  z-index:0;
}
div.bg-3{
  position: fixed;
  background-color: #5050ff;
  top:100vh;
  height:100vh;
  width:100vw;
  transition-duration: 0.4s;

}
div.bg-4{
  position:fixed;
  background-color: #9090ff;
  top:100vh;
  height:100vh;
  width:100vw;
  transition-duration: 0.4s;
}
div.bg-5{
  position:fixed;
  background-color: #404060;
  top:100vh;
  height:100vh;
  width:100vw;
  transition-duration: 0.4s;
}
@media screen and (orientation: landscape) {
  .top-menu ul {
    z-index: 100;
    position:fixed;
    list-style: none;
    margin:0 auto;
    width:100vw;
    padding:1vw 4vw;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  }

  .top-menu ul li,
  .top-menu ul li a{
    font-size: 3vw;
    color: #bbc1c6;
    font-weight: lighter;
    text-decoration:none;
  }
  .top-menu ul li{
    display: inline-block;
    border-style: solid;
    border-color: #dfe4e4;
    border-radius: 0.2em;
    border-width: 1px;
    padding:0.25em 0.8em;
    background:none;
    transition-duration: 0.4s;
    margin: 0 1vw;
  }
  .top-menu ul li:hover{
    background: rgba(40, 60, 210, 0.5);
  }
}
@media screen and (orientation: portrait) {
  .top-menu ul {
    position:fixed;
    list-style: none;

    bottom: 0;
    width:100vw;
    height: 10vw;
    padding:1vw 4vw;
    margin:0;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  }
  .top-menu ul li{
    display: inline-block;
    float: left;
    border-style: solid;
    border-color: #dfe4e4;
    border-radius: 0.2em;
    border-width: 1px;
    height:9.6vw;
    width: 15vw;
    word-wrap: break-word;
    margin: 0.1vw 2vw;
    text-align:center;
    vertical-align: middle;
  }
  .top-menu ul li a{
    font-size: 5vw;
    color: #bbc1c6;
    font-weight: lighter;
    text-decoration:none;
  }
}

div.scroll-supporter{
  height:10vh;
  width: 1vh;
  position: fixed;
  background-color: #9090ff;
  right:1vh;
  top:0vh;
  z-index: 0;
}
